<template>
  <!--批量导入弹窗-->
  <el-dialog :visible.sync="visible" :loading="loadingInfo" size="large" title="批量导入">
    <el-row class="mv10">
      <el-col :span="24">
        <label :for="`excelFile${tmp}`" class="excelFileLabel">
          <span class="file-label-text">请选择文件</span>
          <input :id="`excelFile${tmp}`" :value="fileValue" accept=".xlm,.xls,.xlt,.xlw,.xlsx" type="file" hidden @change="handleFileSelect" >
          <el-input v-model="file.name" class="search-input" disabled/>
        </label>
        <el-button style="margin-left: 10px" size="small" type="text" @click="exportTemp">下载模版</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button :loading="loadingInfo" style="margin-top: 20px" size="small" type="primary" @click="submitUpload">导入
        </el-button>
        <el-button v-if="upStatus.code" @click="exportErrorFile">下载错误列表</el-button>
      </el-col>
    </el-row>
    <el-row v-if="upStatus.code" class="mt20">
      <el-col :span="24" style="color:red">
        <p>{{ file.name }} 导入失败，请修改后重新上传</p>
        <p>失败原因：{{ upStatus.msg }}</p>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>

export default {
  name: 'UpLoader',
  props: {
    loadingInfo: { type: Boolean, default: false }
  },
  data() {
    return {
      tmp: Date.now(),
      visible: false,
      fileValue: '',
      loading: false,
      file: { name: '' },
      upStatus: {
        code: '',
        msg: '',
        data: []
      },
      tempConfig: {}
    }
  },
  methods: {
    handleFileSelect(e) {
      this.file = e.target.files[0] || { name: '' }
      // 如果文件改变需要初始化上传状态
      this.upStatus = { code: '', msg: '', data: [] }
    },
    exportTemp() {
      try {
        this.$emit('downLoad')
      } catch (e) {
        this.$notify.error({
          title: '提示',
          message: '模板下载遇到错误'
        })
      }
    },
    submitUpload() {
      if (!this.file.name || this.file.name.indexOf('.xl') === -1) {
        this.$notify.warning({
          title: '提示',
          message: '请选择excel文件'
        })
        return
      }
      this.$emit('upLoad', this.file)
    },
    open() {
      this.visible = true
      this.fileValue = ''
      this.file = { name: '' }
    },
    close() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
  .file-label-text {
    cursor: pointer;
    color: #409eff;
  }
</style>

